<template>
        <div class="page">
          <div class="main">
        <el-form :model="registerData"  :rules="rules" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
    <el-form-item   prop="phone">
      
      <el-input v-model="registerData.phone" placeholder="请输入您的手机号"/>
 
    </el-form-item>
    <el-form-item   prop="password">
      
       <el-input type="password" v-model="registerData.password" placeholder="请输入您的密码"/>

    </el-form-item>
    <el-form-item   prop="captcha">
 
      <el-input   v-model="registerData.captcha" placeholder="请输入您的验证码">
        <template #suffix>
          <el-button type="primary"  text  @click="getCaptcha()">获取验证码</el-button>
        </template>
        </el-input>

   </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="register()">立即注册</el-button>
     </el-form-item>
  </el-form>
</div>

        </div>
       
   
</template>
<script lang="js" setup>
import { reactive,ref } from 'vue'
import  request from '../request'
import Vrouter from "@/router";

const ruleFormRef = ref(null);

// do not use same name with ref
const registerData = reactive({
  phone: '',
  password:'',
  captcha:''
});
const rules={
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
           ],
           password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
           ],
           captcha: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
           ]
        };
 
 //注册
  const register=function(){
    ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
       console.log('register!')
       console.log(registerData)
 
       request  .post('app/user/register',registerData)
      .then(function (data){
           //成功
         let token=data;
         alert("注册成功，正在自动登录");
         window.localStorage.setItem("user-token",token);
         Vrouter.push({path:"/index"});

       
          console.log(data);
 
       }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
  

     } else {
      console.log('error submit!', fields)
    }
  })
  }
  //获取验证码
  function getCaptcha(){
    request  .get('app/user/sendCaptcha?type=1&phone='+registerData.phone)
      .then(function (data){
           //成功
          console.log(data);
 
       }) .catch(function (error) { // 请求失败处理
        console.log(error);
      });
     
  }

</script>
<style scoped>
.page{
  display: flex !important
;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;


  }
   .main{
    }
</style>